<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>酒店管理系统</title>
    <link rel="shortcut icon" href="favicon.ico">
	<link rel="stylesheet" href="../static/css/superfish.css">
	<link rel="stylesheet" href="../static/css/bootstrap-datepicker.min.css">
	<link rel="stylesheet" href="../static/css/cs-select.css">
	<link rel="stylesheet" href="../static/css/cs-skin-border.css">

	<link rel="stylesheet" href="../static/css/themify-icons.css">
	<link rel="stylesheet" href="../static/css/flaticon.css">
	<link rel="stylesheet" href="../static/css/icomoon.css">
	<link rel="stylesheet" href="../static/css/flexslider.css">
    <link rel="stylesheet" href="../static/my.css">
</head>
<body>
<div style="background-color: #dddddd">
<nav id="fh5co-menu-wrap" role="navigation">
						<ul class="sf-menu" id="fh5co-primary-menu">
                            <li><h2 style="color:#ffffff;float: left;padding-top: 8px">酒店管理系统&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</h2></li>
							<li><a href="http://127.0.0.1:8000/index">员工管理</a></li>
							<li><a href="http://127.0.0.1:8000/insert_client" >顾客管理</a></li>
							<li><a href="http://127.0.0.1:8000/insert_food">餐厅管理</a></li>
                            <li><a href="http://127.0.0.1:8000/insert_room">客房管理</a></li>
							<li><a href="http://127.0.0.1:8000/insert_park">停车场管理</a></li>
                            <li><a href="http://127.0.0.1:8000/insert_vip">会员信息管理</a></li>
                            <li><a href="http://127.0.0.1:8000/insert_order">餐厅订单管理</a></li>
                            <li><a href="http://127.0.0.1:8000/insert_accomodation">客房订单管理</a></li>

						</ul>

					</nav>
<br>
<br>
<br>
<div style="width: 70%;margin-left: 15%;background-color: #ffffff;height: 500px">
<center>

    <div class="logo">
					<h2>客房信息录入</h2>
    </div>
</center>
<form action="/insert_room/" method="post" style="margin-left:40px">

    <p><label>房间编号&nbsp;:&nbsp;&nbsp;</label><input type="text" name="id" style="width: 500px;height: 25px"/></p>
    <p><label>客房类型&nbsp;:&nbsp;&nbsp;</label><input type="text" name="type" style="width: 500px;height: 25px"/></p>
    <p><label>房间价格&nbsp;:&nbsp;&nbsp;</label><input type="text" name="price" style="width: 500px;height: 25px"/></p>
    <p><label>负责人号&nbsp;:&nbsp;&nbsp;</label><input type="text" name="waiter" style="width: 500px;height: 25px"/></p>
        <input type="submit" value="提交">

</form>
</div><p>&nbsp;</p><p>&nbsp;</p>
<div style="width: 70%;margin-left: 15%;background-color: #ffffff;height: 500px">
<center>
<a href="http://127.0.0.1:8000/show_room">
    <div class="logo">
					<h2>客房信息展示</h2>
    </div></a>
    <table border="1" cellspacing="0" style="width: 90%">
    <tr>
        <th>房间号</th>
        <th>客房类型</th>
        <th>价格/元</th>
        <th>负责人编号</th>
        <th colspan="2">操作</th>
    </tr>
    {% for line in people_list %}
    <tr>
        <td class="id">{{line.房间号}}</td>
        <td>{{line.客房类型}}</td>
        <td>{{line.价格}}</td>
        <td>{{line.负责人编号.员工id}}</td>
        <td><center><button class="btn btn-primary delete">删除</button></center></td>
        <td><center><button class="btn btn-primary update">修改</button></center></td>
    </tr>
    {% endfor %}
    </table>
</center>
</div><p>&nbsp;</p><p>&nbsp;</p>
<div style="width: 70%;margin-left: 15%;background-color: #ffffff;height: 500px">
<center>
	<h2><a>客房信息查询</a></h2>

                <form action="/search_room/" method="post">
        <p>根据选择的属性查询客房信息</p>
                    <i></i>&nbsp<select name="columns">
                        <option value="房间号">房间号</option>
                        <option value="客房类型">客房类型</option>
                        <option value="价格">价格</option>
                        <option value="负责人编号">负责人编号</option>
                                          </select>
                    <input type="text" name="value">
                    <input type="submit">
                </form>
        <table >
        <tbody>
        <tr>
            {% for line in  room %}
             <td style="display: inline-block">
                 <a href="{{ line.url}}" target="_blank"><img src="{{ line.image}}" width="160" height="220" /></a><p></p>房间号：{{line.房间号}}<br>客房类型：{{line.客房类型}}<br>价格：{{ line.价格 }}<br>负责人编号：{{ line.负责人编号.员工id }}
             </td>
            {% endfor %}
        </tr>
        </tbody>
    </table>
</center>
</div>
</div>
</body>
<script src="../static/js/jquery-2.1.4.min.js"></script>
<script>
    $(".delete").click(function () {
        $(this).parent().parent().remove();
        var id = $(this).parent().siblings(".id").first().html();
        alert(id);
        $.get('../delete_room',{'id': id});
    });
</script>
<script>
    $(".update").click(function () {
        var ID = $(this).parent().siblings(".id").first();
        if ($(this).text() == "修改") {
            $(this).text("完成");
            ID.next().html('<input type=\"text\" class=\"type\"/>');
            ID.next().next().html('<input type=\"text\" class=\"price\"/>');
            ID.next().next().next().html('<input type=\"text\" class=\"waiter\"/>');
        }
        else{
            var id = ID.html();
            var type = ID.next().children().val();
            var price = ID.next().next().children().val();
            var waiter = ID.next().next().next().children().val();
            var room = {'id':id, 'type':type, 'price': price, 'waiter':waiter};
            $.post('../update_room/',room, function(res){
                location.reload();
            });
        }
    });
</script>
</html>